let path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin')
const CopyWebpackPlugin = require("copy-webpack-plugin")
module.exports = {
  entry: path.resolve(__dirname, "../src/index.js"),
  output: {
    path: path.resolve(__dirname, "../build"),
    filename: "./js/bundle.js",
  },
  //loader配置
  module: {
    rules: [
      {
        /* 
        test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
      */
        test: /\.css$/i,
        /* 
        css-loader:为了识别css类型文件进行打包
        style-loader:js把样式放在style标签中,并插入到页面中
        use后如果是一个数组,则是从后向前一致加载
      */
        // use: ["style-loader", "css-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        /* 
          test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
        */
        test: /\.less$/i,
        /* 
          less-loader:识别less文件类型
          css-loader:为了识别css类型文件进行打包
          style-loader:js把样式放在style标签中,并插入到页面中
          use后如果是一个数组,则是从后向前一致加载
        */
        // use: ["style-loader", "css-loader", "less-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]},
        {
          test: /\.(png|jpg|gif|svg)$/,
          //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
          type: "asset",
          parser: {
              dataUrlCondition: {
                  maxSize: 30 * 1024, // 小于30kb以下的图片会被打包成base64格式
              },
          },
          generator: {
              filename: 'images/[name][ext]'
          }
      },
      ],
  },
  //优化的配置
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
    minimize: true,
  },
  //插件的配置
  plugins: [
    new MiniCssExtractPlugin({
      filename: "./css/main.css",
    }),new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
      minify: {
        collapseWhitespace: true,
        keepClosingSlash: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      }  
    }),new ESLintPlugin({
      fix: true
    }),new CopyWebpackPlugin({
      patterns: [{
        from: path.resolve(__dirname,'../public'),
        to: "public",
        //配置复制时忽略的文件
        globOptions: {
          ignore: ["**/index.html"]
        }
      }],
    }),
  ],
  mode: "production",
};
